<template>
  <el-card class="selected-mission-card" v-if="mission">
    <div class="selected-mission-info">
      <h3>当前选中的教学任务</h3>
      <div class="mission-detail-grid">
        <div class="detail-item">
          <span class="label">课程名称:</span>
          <span class="value">{{ mission.courseName }}</span>
        </div>
        <div class="detail-item">
          <span class="label">课程编码:</span>
          <span class="value">{{ mission.courseCode }}</span>
        </div>
        <div class="detail-item">
          <span class="label">学期:</span>
          <span class="value">{{ mission.termName }}</span>
        </div>
        <div class="detail-item">
          <span class="label">教师:</span>
          <span class="value">{{ getTeacherNames(mission) }}</span>
        </div>
        <div class="detail-item">
          <span class="label">学员人数:</span>
          <span class="value">{{ getStudentCount(mission) }}</span>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'MissionStudentTaskInfo',
  props: {
    mission: {
      type: Object,
      default: null
    }
  },
  setup(props) {
    // 获取教师名称
    const getTeacherNames = (mission) => {
      if (!mission) return '未分配'
      
      if (mission.teacherName) {
        return mission.teacherName
      }
      
      if (mission.teacherNames && mission.teacherNames.length > 0) {
        return mission.teacherNames.join(', ')
      }
      
      return '未分配'
    }

    // 获取学员数量
    const getStudentCount = (mission) => {
      if (!mission) return 0
      return mission.studentCount || 0
    }

    return {
      getTeacherNames,
      getStudentCount
    }
  }
}
</script>

<style scoped>
.selected-mission-card {
  margin-bottom: 20px;
}

.selected-mission-info h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #303133;
}

.mission-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.detail-item {
  display: flex;
  flex-direction: column;
}

.detail-item .label {
  font-size: 13px;
  color: #909399;
  margin-bottom: 5px;
}

.detail-item .value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}
</style>
